<template>
    <div class="search">
        <!-- 头部搜索 -->
      <div class="my_header">
            <div class="top1">
                <i class="mui-icon mui-icon-arrowleft" aria-hidden="true"></i>
                <van-icon id="ser" name="search" />
                <input type="text" placeholder="张三" />
                <span class="cancel">取消</span>
            </div>
       </div>
       
    </div>
</template>
<script>

</script>
<style scoped>
.my_header {
  height: .88rem;
  background: rgba(0, 133, 240, 1);
  text-align: center;
  color: #fff;
  position: relative;
  padding: 0 .2rem;
}
.my_header i {
    font-size: .4rem;
    float: left;
    line-height: .88rem;
}
.top1{
    height: .88rem; 
    line-height: .88rem; 
}
#ser {
    font-size: .28rem;
    position: absolute;
    left: 15%;
    color: #ccc;
    
}
.top1 input {
    width: 5.58rem;
    height: .52rem;
    font-size: .28rem;
    line-height: .52rem;
    padding-left: 10%;
    margin-bottom: .01rem;
}
.cancel {
    font-size: .28rem;
    font-weight:500;
    color: #fff;
    float: right;
    padding-right: .1rem;
}
</style>

